"use client";

import { useCallback, useEffect, useState } from 'react';
import Image from "next/image";
import ArrowDown from "@/assets/icons/arrow-down.svg";
import StarIcon from "@/assets/icons/star.svg";
import SparkleIcon from "@/assets/icons/sparkle.svg";
import grainImage from "@/assets/images/grain.jpg";
import { HeroOrbit } from '@/components/HeroOrbit';
import { SparklesText } from "@/components/magicui/sparkles-text";
import { getHomeData } from '@/lib/api';
import type { HomeData } from '@/lib/api';
import { LoadingDots } from '@/components/ui/loading';
import { Project } from '../lib/api';
import { getLogoUrl, getImageUrl } from '@/lib/utils';

export const HeroSection = () => {
  const [homeData, setHomeData] = useState<HomeData | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const logoUrl = getLogoUrl();

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true);
        setError(null);
        const data = await getHomeData();
        setHomeData(data);
      } catch (error) {
        console.error('Error fetching home data:', error);
        setError('加载数据失败，请稍后重试');
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, []);

  const scrollToSection = useCallback((sectionId: string) => {
    if (typeof window !== 'undefined') {
      const section = document.getElementById(sectionId);
      section?.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  return (
    <div className="py-32 md:48 lg:py-60 relative z-0 overflow-x-clip pointer-events-none">
      <div className="absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_70%,transparent)]">
        <div className="absolute inset-0 -z-30 opacity-5" style={{ backgroundImage: `url(${grainImage.src})` }}></div>
        <div className="size-[620px] hero-ring"></div>
        <div className="size-[820px] hero-ring"></div>
        <div className="size-[1020px] hero-ring"></div>
        <div className="size-[1220px] hero-ring"></div>

        <HeroOrbit size={430} rotation={-14} orbitDuration="30s" shouldorbit shouldspin spinDuration="3s">
          <SparkleIcon className="size-8 text-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={440} rotation={79} orbitDuration="32s" shouldorbit shouldspin spinDuration="3s">
          <SparkleIcon className="size-5 text-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={520} rotation={-41} orbitDuration="34s" shouldorbit shouldspin spinDuration="3s">
          <div className="size-3 rounded-full bg-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={530} rotation={178} orbitDuration="36s" shouldorbit shouldspin spinDuration="3s">
          <SparkleIcon className="size-10 text-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={550} rotation={20} orbitDuration="38s" shouldorbit shouldspin spinDuration="6s">
          <StarIcon className="size-12 text-emerald-300" />
        </HeroOrbit>
        <HeroOrbit size={590} rotation={98} orbitDuration="40s" shouldorbit shouldspin spinDuration="6s">
          <StarIcon className="size-8 text-emerald-300" />
        </HeroOrbit>
        <HeroOrbit size={650} rotation={-5} orbitDuration="42s" shouldorbit shouldspin spinDuration="3s">
          <div className="size-3 rounded-full bg-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={710} rotation={144} orbitDuration="44s" shouldorbit shouldspin spinDuration="3s">
          <SparkleIcon className="size-14 text-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={720} rotation={85} orbitDuration="46s" shouldorbit shouldspin spinDuration="3s">
          <div className="size-3 rounded-full bg-emerald-300/20" />
        </HeroOrbit>
        <HeroOrbit size={800} rotation={-72} orbitDuration="48s" shouldorbit shouldspin spinDuration="6s">
          <StarIcon className="size-28 text-emerald-300" />
        </HeroOrbit>
      </div>
      <div className="container">
        <div className="flex flex-col items-center">
          <Image src={getImageUrl(logoUrl)} width={100} height={100} className="size-[100px]" alt="illli logo" />
          <div className="bg-indigo-950 border border-indigo-900 px-4 py-1.5 inline-flex items-center gap-4 rounded-lg">
            <div className="bg-green-500 size-2.5 rounded-full relative">
              <div className="bg-green-500 absolute inset-0 rounded-full animate-ping-large"></div>
            </div>
            <div className="text-sm font-medium">personal study Project v 1.0</div>
            <span className="text-amber-500">Ai</span>
          </div>
        </div>
        <div className="max-w-lg mx-auto">
          {isLoading ? (
            <div className="text-center mt-8">
              <LoadingDots className="justify-center" />
            </div>
          ) : error ? (
            <div className="text-center mt-8 text-red-400">{error}</div>
          ) : (
            <h1 className="font-serif text-3xl md:text-4xl lg:text-5xl text-center mt-8 tracking-wide leading-tight">
              {homeData?.home_title}
              <SparklesText className="p-4 md:p-6 lg:p-8 font-semibold" text={homeData?.web || ''} colors={{ first: "#9E7AFF", second: "#FE8BBB" }} />
            </h1>
          )}
          <p className="mt-2 font-bold text-2xl md:text-3xl text-center text-amber-500 animate-pulse">
          illli Ai Studio 
          </p>
          <p className="mt-4 text-center text-white/70 text-sm md:text-base max-w-md mx-auto">
            {homeData?.description}
          </p>
        </div>
        <div className="flex flex-col md:flex-row justify-center items-center mt-8 gap-4">
          <button 
            onClick={() => scrollToSection('projects')} 
            className="inline-flex items-center gap-2 border border-white/15 px-6 h-12 rounded-xl pointer-events-auto">
            <span className="font-semibold">要不先看看作品</span>
            <ArrowDown className="size-4" />
          </button>
          <button 
            onClick={() => scrollToSection('contact')}
            className="inline-flex items-center gap-2 border border-white bg-white text-indigo-950 px-6 h-12 rounded-xl pointer-events-auto">
            <span>🖐️</span>
            <span className="font-semibold">也可以跟我联系</span>
          </button>
        </div>
      </div>
    </div>
  );
};